<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
    <script src="../static/js/vue.js"></script>
</head>

<body>
<h3>示例：表单</h3>
<p>
    <a href="https://cn.vuejs.org/v2/guide/forms.html" target="_blank">表单</a>
</p>
<div id="app">
    <h2>文本</h2>
    <input v-model="message" placeholder="edit me">
    <p>Message is: {{message}}</p>

    <h2>多行文本</h2>
    <span>Multiline message is:</span>
    <p style="white-space: pre-line;">{{message}}</p>
    <br>
    <textarea v-model="message" placeholder="add multiple lines"></textarea>

    <h2>复选框</h2>
    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">{{ checked }}</label>

    <h2>多个复选框，绑定到同一个数组</h2>
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
    <br>
    <span>Checked names: {{ checkedNames }}</span>

    <h2>单选按钮</h2>
    <div id="example-4">
        <input type="radio" id="one" value="One" v-model="picked">
        <label for="one">One</label>
        <br>
        <input type="radio" id="two" value="Two" v-model="picked">
        <label for="two">Two</label>
        <br>
        <span>Picked: {{ picked }}</span>
    </div>

    <h2>选择框, 单选时</h2>
    <div id="example-5">
        <select v-model="selected">
            <option disabled value="">请选择</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>Selected: {{ selected }}</span>
    </div>

    <h2>多选时 (绑定到一个数组)：</h2>
    <div id="example-6">
        <select v-model="multiSelected" multiple style="width: 50px;">
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <br>
        <span>Selected: {{ multiSelected }}</span>
    </div>

    <h2>用 v-for 渲染的动态选项：</h2>
    <select v-model="forSelected">
        <option v-for="option in forOptions" v-bind:value="option.value">
            {{ option.text }}
        </option>
    </select>
    <span>Selected: {{ forSelected }}</span>

    <h2>值绑定</h2>
    对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值)：
    <div>
        <!-- 当选中时，`picked` 为字符串 "a" -->
        <input type="radio" v-model="picked" value="a">
        <span>radio: {{ picked }}</span>
    </div>
    <div>
        <!-- `toggle` 为 true 或 false -->
        <input type="checkbox" v-model="toggle">
        <span>checkbox: {{ toggle }}</span>
    </div>
    <!-- 当选中第一个选项时，`selected` 为字符串 "abc" -->
    <div>
        <select v-model="selectedStr">
            <option value="abc">ABC</option>
        </select>
        <span>Selected: {{ selectedStr }}</span>
    </div>

    <h2>复选框，自定义value</h2>
    <div>
        <input
                type="checkbox"
                v-model="toggle"
                true-value="yes"
                false-value="no"
        >
        <span>checkbox: {{ toggle }}</span>
    </div>

    <h2>单选按钮</h2>
    <input type="radio" v-model="pick" v-bind:value="aaa" @click="pick_click">
    <!--// 当选中时
    vm.pick === vm.aaa-->

    <h2>选择框的选项</h2>
    <select v-model="selected2">
        <!-- 内联对象字面量 -->
        <option v-bind:value="{ number: 123 }">123</option>
    </select>
    <span>select: {{ selected2 }}</span>
    <span>select.number: {{ selected2.number }}</span>
    <!--// 当选中时
    typeof vm.selected // => 'object'
    vm.selected.number // => 123-->

    <div>
        <h2>修饰符</h2>
        <!-- 在“change”时而非“input”时更新 -->
        <h4>.lazy</h4>
        <input v-model.lazy="msg"> <span>失去焦点更新msg: {{ msg }}</span>
        <h4>.number</h4>
        <!--自动将用户的输入值转为数值类型-->
        <input v-model.number="age" type="number"> <span>自动转换数字age: {{ age }}</span>
        <h4>.trim</h4>
        <!--过滤用户输入的首尾空白字符-->
        <input v-model.trim="trimStr"><span>过滤首尾空白trimStr: {{ trimStr }}</span>
    </div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            checked: '',
            checkedNames: [],
            picked: '',
            selected: '',
            multiSelected: [],
            forSelected: 'A',
            forOptions: [
                {text: 'One', value: 'A'},
                {text: 'Two', value: 'B'},
                {text: 'Three', value: 'C'}
            ],
            toggle: '',
            selectedStr: 'BBB',
            pick: '',
            aaa: 'aaa',
            selected2: '',
            msg: 'msg',
            age: '10a',
            trimStr: '',
        },
        methods: {
            pick_click: function (event) {
                console.log(vm.aaa);
                console.log(vm.pick);
                alert("vm.pick === vm.aaa result:" + (vm.pick === vm.aaa));
            }
        }
    })
</script>
</body>
</html>
